<template>
  <div class="works">
    <Title title="我的工作"></Title>
    <div class="content">
      <a-row :gutter="24" style="height: 40%">
        <a-col :span="12" style="height: 100%">
          <div class="item">
            <img
              src="@/assets/images/dashboard/icon-1.png"
              alt=""
              class="bg-img"
            />
            <div class="text">
              <span>我的问题</span>
              <div class="value-text">
                <span style="color: #6e8ff2">2223</span> 个
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="12" style="height: 100%">
          <div class="item">
            <img
              src="@/assets/images/dashboard/icon-2.png"
              alt=""
              class="bg-img"
            />
            <div class="text">
              <span>我的共享</span>
              <div class="value-text">
                <span style="color: #fb7b66">2223</span> 个
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" style="margin-top: 20px; height: 40%">
        <a-col :span="12" style="height: 100%">
          <div class="item">
            <img
              src="@/assets/images/dashboard/icon-3.png"
              alt=""
              class="bg-img"
            />
            <div class="text">
              <span>我的审阅</span>
              <div class="value-text">
                <span style="color: #40c1fd">2223</span> 个
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="12" style="height: 100%">
          <div class="item">
            <img
              src="@/assets/images/dashboard/icon-4.png"
              alt=""
              class="bg-img"
            />
            <div class="text">
              <span>我的交付</span>
              <div class="value-text">
                <span style="color: #78d16b">2223</span> 个
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  // import { defineProps } from 'vue';
  import Title from '../title/index.vue';

  // defineProps({
  //   project: {
  //     type: Object,
  //     default() {
  //       return {};
  //     },
  //   },
  // });
</script>

<style scoped lang="less">
  .works {
    //border: 1px solid red;
    height: 100%;
  }
  .content {
    margin-top: 20px;
    padding: 0 32px 0 32px;
    //border: 1px solid red;
    height: calc(100% - 50px);
  }
  .item {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background: var(--color-fill-1);
    //border: 1px solid red;
    height: 100%;
    .bg-img {
      //height: 55px;
      //width: 55px;
      //border: 1px solid red;
    }
    .text {
      //border: 1px solid red;
      margin-left: 16px;
      height: calc(100% - 40px);
      //position: relative;
      //width: calc(100% - 100px);
      span {
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #1d2129;
        line-height: 20px;
      }
      .value-text {
        flex: 1;
        bottom: -8px;
        margin-top: 4px;
        font-size: 12px;
        span {
          display: inline-block;
          font-size: 22px;
          font-family: FontName-Regular, FontName;
          font-weight: 400;
          //color: #6e8ff2;
          line-height: 26px;
          margin-right: 6px;
        }
      }
    }
  }
</style>
